<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.3);
            /*固定定位以html视口(view port)为参照物
            紧贴四个边，实现撑满全屏的效果*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
<!--    lorem*50-->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at atque quidem unde voluptatibus? A, ad
        consequatur dolores eaque eius eveniet laboriosam omnis possimus repellat sit sunt voluptate? Soluta, velit.
    </div>
    <div>Adipisci id odio porro velit! Aut cum cumque delectus, error fugit magnam magni molestiae quaerat, suscipit
        temporibus ullam, voluptatem. Accusantium alias architecto cumque harum id quae quam quisquam quo. Dolorem.
    </div>
    <div>Aliquam animi assumenda doloribus ea explicabo non obcaecati, odit quisquam unde veniam voluptas voluptatibus.
        Amet consectetur ea, earum eum ex harum iste laborum provident sequi vel. Dolores ipsa neque odit!
    </div>
    <div>Accusantium, assumenda aut consectetur corporis cumque, earum eos eum ex harum hic itaque nemo neque nihil nisi
        pariatur provident quas ratione repellendus rerum saepe similique temporibus velit vero voluptas voluptates.
    </div>
    <div>Alias at, id iusto laudantium neque nostrum obcaecati qui quibusdam quis ut? Deleniti enim error est ex harum
        illum iure laudantium neque provident recusandae. Architecto asperiores eos ipsam repudiandae ut?
    </div>
    <div>Ad alias animi, at corporis distinctio explicabo facere hic ipsum magni minima molestias omnis praesentium quae
        quaerat saepe temporibus totam! Accusamus eligendi eos ipsa modi molestiae mollitia recusandae ullam
        voluptatibus!
    </div>
    <div>Accusantium adipisci, beatae consectetur culpa deserunt dolore dolorem eos fugiat fugit harum illum impedit
        maiores molestias necessitatibus nulla numquam possimus, quae quam quisquam veniam? Aperiam cum eaque ipsum nisi
        suscipit!
    </div>
    <div>Animi autem beatae consequuntur cumque deleniti dolor enim eos eveniet explicabo facilis impedit itaque iure
        necessitatibus neque odio officia perspiciatis, possimus provident quaerat quasi quidem repellendus similique
        sit tempore voluptas.
    </div>
    <div>Animi dolores est fuga nemo nostrum officia quasi repudiandae? A consectetur, deleniti ducimus est illo magnam
        magni mollitia nihil nostrum officia. Ab doloribus labore libero quod repudiandae suscipit, temporibus
        voluptatibus.
    </div>
    <div>Accusantium aperiam consectetur id ipsam non placeat quis tempora! Dicta molestias nihil, odit quia ratione
        repellat sint! Animi asperiores aspernatur, at cumque enim explicabo illum odit ut! Officia, perferendis, sunt.
    </div>
    <div>At aut autem cumque delectus dolores doloribus excepturi expedita facere fugit incidunt molestiae odio
        perferendis repellendus reprehenderit, sequi temporibus unde, vero vitae. Eum ex fugit illo quos reiciendis.
        Error, nesciunt?
    </div>
    <div>Architecto debitis doloremque dolores dolorum eum, fuga iure labore molestiae, natus, omnis quaerat recusandae
        veritatis voluptatum! Accusantium amet aut autem blanditiis deserunt distinctio eaque, facilis iusto obcaecati
        perspiciatis rerum sit.
    </div>
    <div>Accusantium, odit voluptatibus. Amet aperiam aspernatur assumenda at, culpa ea error et eum id iste, itaque
        maxime nihil odio odit officia quam qui quibusdam quod sint sit ullam veritatis vitae.
    </div>
    <div>Delectus distinctio in nisi omnis sit temporibus tenetur! Debitis deleniti dicta ducimus excepturi
        exercitationem iste laboriosam perferendis quae. Atque autem dolor dolore esse laborum maiores mollitia nesciunt
        quos, reiciendis vel?
    </div>
    <div>Amet dignissimos ea eligendi hic id incidunt, ipsum iure neque officia, omnis perspiciatis quidem quo quos rem
        tenetur. Eius incidunt odit repudiandae sit ullam. Eius incidunt nisi nulla quas repellat.
    </div>
    <div>Accusamus adipisci aut consequatur consequuntur culpa cum cumque distinctio dolorum ducimus eligendi incidunt
        labore libero minima molestiae nam nulla officiis omnis praesentium quisquam quo quos rem repellat repellendus
        reprehenderit, similique.
    </div>
    <div>Architecto, consequatur culpa doloremque ea eos explicabo illo illum ipsam iure, minus molestias nam, possimus
        repellat sapiente unde. Ad adipisci consequatur eum expedita iusto maiores nisi repudiandae tenetur totam vero!
    </div>
    <div>Animi cumque dicta eligendi error explicabo laboriosam mollitia nam nobis placeat soluta. Assumenda facere
        ipsam nulla, numquam omnis porro tempore voluptas. Eius impedit maxime natus perspiciatis quis recusandae sed
        ut!
    </div>
    <div>A ad autem cupiditate harum molestias officiis praesentium qui saepe suscipit voluptatum. Amet aspernatur
        distinctio ducimus eius eos est ex fugiat, ipsam laudantium magnam maiores molestias perferendis, qui quisquam
        sint.
    </div>
    <div>A corporis dolore doloremque, eum ipsam nesciunt nostrum? Atque blanditiis delectus et incidunt itaque labore
        laudantium, libero molestiae nesciunt nulla praesentium quam reprehenderit sunt suscipit temporibus tenetur,
        voluptatem voluptatibus! Adipisci.
    </div>
    <div>Ab assumenda atque, beatae, corporis dolorum ea esse exercitationem iusto laboriosam magnam molestias mollitia
        odio omnis provident quod unde vel, vitae! Ipsum itaque labore modi quas quibusdam sint sunt suscipit!
    </div>
    <div>Aliquid amet culpa, dolores enim error expedita fugit ipsa ipsam itaque odit provident quia reiciendis,
        temporibus veritatis voluptatum? Beatae consequatur delectus dolor, hic magni officiis quis tenetur veniam.
        Expedita, saepe!
    </div>
    <div>Cupiditate est facilis iure, nam odio placeat quidem saepe. Distinctio mollitia quam sit veritatis? Asperiores
        dignissimos doloribus eaque eius eveniet ex exercitationem maiores, minus officia reiciendis rerum similique
        suscipit totam.
    </div>
    <div>Laborum, recusandae, repudiandae. Necessitatibus nesciunt nihil officia pariatur veritatis. Architecto cumque
        dolor incidunt inventore quod ratione ullam vel. Amet aperiam consequuntur cumque id laudantium, nemo quibusdam
        repellendus sapiente tempore ullam.
    </div>
    <div>Obcaecati, odio, quod. Aspernatur dolorum earum impedit iusto nulla porro, provident veritatis? Adipisci beatae
        culpa cumque, dolores dolorum eveniet, expedita illum ipsum nesciunt nobis omnis quidem recusandae repellendus
        suscipit voluptates.
    </div>
    <div>Aliquid autem consequatur distinctio iure numquam placeat quibusdam voluptatibus! Id ipsa perferendis quos
        reprehenderit voluptates? A aperiam, blanditiis debitis doloremque eligendi esse harum neque possimus quia quis
        sunt voluptatibus voluptatum.
    </div>
    <div>Aliquam aliquid animi corporis, cupiditate distinctio dolor dolore dolorem doloribus facere fugit incidunt ipsa
        libero magni mollitia, nesciunt nihil non nulla odit officiis, reiciendis repudiandae saepe similique sit
        temporibus tenetur!
    </div>
    <div>A ad adipisci aspernatur atque corporis cupiditate, deserunt dignissimos distinctio dolor, dolorum ex fugit id
        inventore ipsa labore maxime numquam obcaecati optio, quae quasi qui recusandae soluta unde vero voluptas!
    </div>
    <div>Ipsa libero officia qui soluta tenetur. Ducimus eveniet incidunt unde. Atque autem eius est excepturi explicabo
        id inventore itaque molestiae, nihil nulla quas unde veritatis? Aperiam autem doloremque iste officiis.
    </div>
    <div>Assumenda consequuntur eius harum hic maiores quo! Ab asperiores at blanditiis cum deserunt incidunt ipsa,
        itaque magni natus officiis quod saepe, sed tempora vel veritatis? Asperiores facilis nemo neque omnis.
    </div>
    <div>Cum deleniti dolore doloribus error esse iure nulla officia repellat sequi veniam? Asperiores blanditiis in
        ipsum. Deserunt doloribus, quasi. Adipisci consequuntur deleniti doloremque ea error minus neque nobis quaerat
        veritatis!
    </div>
    <div>A accusamus aspernatur culpa deserunt dignissimos explicabo, maiores odio odit officia perspiciatis quia quis
        quo rerum saepe sequi similique sit voluptate! Consequatur eius ipsum perferendis perspiciatis praesentium sint
        tempora vero.
    </div>
    <div>A asperiores, debitis dolor doloremque explicabo hic non qui sit! Error fugit labore maiores placeat
        repellendus. Corporis dolor doloribus fugiat iste molestiae nobis officiis rem, reprehenderit, rerum sapiente
        sequi voluptas.
    </div>
    <div>A ab accusantium cupiditate harum provident suscipit! Ab accusantium, alias aperiam consequatur, ea eos est
        expedita minima nesciunt pariatur perspiciatis quae, quaerat quas qui quos recusandae saepe sint sit soluta?
    </div>
    <div>Accusamus aut doloribus earum ex, id, illum nihil porro provident quam quis reiciendis sed veniam, voluptas!
        Deleniti, dignissimos enim, error excepturi impedit magni natus perspiciatis possimus sequi tenetur totam vero?
    </div>
    <div>Dolore dolores inventore itaque, laboriosam libero maxime praesentium quaerat. Eaque error obcaecati quis
        suscipit veritatis. Aliquam, animi consectetur dolores exercitationem illum in iusto, labore maiores minus neque
        nostrum obcaecati voluptate!
    </div>
    <div>Aut beatae dolore id illo, in magnam officiis possimus provident sint vel. Accusamus adipisci aspernatur
        assumenda, culpa, doloribus ipsa iste iure nemo non praesentium quidem quod repudiandae rerum sint temporibus.
    </div>
    <div>Assumenda eaque error laborum optio perferendis quidem voluptatibus. A aliquam dolore dolorum inventore labore
        nostrum provident sequi? Asperiores autem dolorem enim exercitationem expedita explicabo hic, ipsa, neque quo
        saepe voluptas?
    </div>
    <div>Adipisci fugiat quam quod tempora. Aliquam blanditiis commodi culpa cupiditate deleniti deserunt dolores esse,
        exercitationem fuga illum in ipsam maiores nobis perspiciatis quae quaerat quibusdam quis quos tempora velit,
        voluptatum.
    </div>
    <div>Consectetur corporis dignissimos earum est ex excepturi exercitationem fugiat, ipsum maxime modi qui quis quod
        rem tempora, temporibus unde ut vero, voluptas! Accusantium aliquid explicabo laborum libero. Aut, excepturi
        sint.
    </div>
    <div>Atque laboriosam molestiae porro? Aliquam asperiores autem blanditiis corporis cum deserunt dignissimos
        distinctio dolorum ea eligendi iste itaque laudantium modi natus perferendis, repellendus sequi suscipit tempore
        ullam vel velit veritatis.
    </div>
    <div>Aperiam error explicabo minima necessitatibus sapiente vero! Distinctio est molestiae sint suscipit
        voluptatibus. A atque consectetur cumque dicta ducimus ex facere, iste omnis quia repellat. Asperiores expedita
        hic minima rerum?
    </div>
    <div>Aspernatur atque autem cupiditate est et eveniet harum illum ipsam iste iusto labore laudantium molestias nemo
        numquam odio rerum sed veniam, voluptate voluptatem voluptatibus? Ipsum itaque quas quibusdam? Inventore, minus!
    </div>
    <div>Accusamus aliquam architecto beatae debitis delectus, dignissimos distinctio dolor doloribus dolorum esse
        eveniet, facere minima minus obcaecati quae, repellat sed sint ullam voluptate voluptatem! Eveniet facilis
        labore officia ut voluptatibus.
    </div>
    <div>Cum eligendi iusto, natus necessitatibus quae quibusdam soluta veniam vero voluptatibus? Ab asperiores beatae
        consectetur cum dolor, dolorum excepturi facere ipsa ipsum, laudantium modi nemo numquam repellat reprehenderit
        vero. Ad.
    </div>
    <div>Eligendi explicabo hic id in necessitatibus, obcaecati perspiciatis placeat quos soluta vel. Accusamus autem
        consequatur cupiditate dolorem, eius error excepturi explicabo, maxime odio porro quo temporibus vel veniam
        veritatis vero!
    </div>
    <div>Accusamus atque, consectetur dolorum fugiat laborum maiores, necessitatibus obcaecati praesentium rem tempore
        ullam velit voluptatibus. Adipisci aspernatur assumenda exercitationem minus nisi rem, soluta unde. Aliquid
        ducimus hic laborum nobis nulla?
    </div>
    <div>Atque aut cumque ex fugiat, iusto, maxime quas quidem quo sequi sint tempora ut, veritatis. Aspernatur commodi
        cupiditate est ipsam laboriosam pariatur rerum sit ut? Cum delectus quidem quisquam unde?
    </div>
    <div>Aperiam architecto distinctio doloribus facilis fugit id labore magnam molestiae neque nobis odio qui quia rem,
        sunt unde vel vitae? Adipisci fugit id molestiae quae quos? Optio porro quasi ratione?
    </div>
    <div>Aperiam corporis culpa deserunt dolor dolorem, dolores error exercitationem explicabo id illo iste iure laborum
        magni modi nobis officiis praesentium quae quia quidem suscipit temporibus ut veritatis voluptate? Esse,
        reprehenderit!
    </div></div>
</body>
</html>